<template>
<div>
    <div>
        <div>
            <!--搜索框-->
            <el-input
              style= "width: 250px"
              placeholder= "请输入文件名搜索"
              suffix-icon= "el-icon-user"
              class= "ml-5"
              v-model= "fileName"
            ></el-input>
            <el-input
              style= "width: 250px"
              placeholder= "请输入文件类型搜索"
              suffix-icon= "el-icon-chat-round"
              class= "ml-5"
              v-model= "fileType"
            ></el-input>
            <el-button class= "ml-5" type= "primary" plain @click= "load"
              ><b>搜索(支持模糊查询)</b></el-button>
            <el-button class= "ml-5" type= "info" plain @click= "clear"
              ><b>重置</b></el-button>
        </div>
        <div style= "margin: 10px 0">
        <el-popconfirm
                  confirm-button-text= "好的"
                  cancel-button-text= "不用了"
                  icon= "el-icon-info"
                  icon-color= "red"
                  title= "您确定批量删除吗？"
                  @confirm= "batchDeleteHandler">
            <el-button type= "danger" slot = "reference" style= "margin-left:10px">
              批量删除
            <i class= "el-icon-delete"></i>
            </el-button>
          </el-popconfirm>
        </div>
              <el-table
            :data= "tableData"
            border
            stripe
            header-cell-class-name= "headerBg"
            @selection-change ="batchDelete"
            ><!--表格边框+斑马线-->
            <!--header-cell可以改变表头颜色，header-row-class-name不可以-->
                <el-table-column type= "selection" width= "55" >
                </el-table-column>
            <el-table-column prop= "fileName" label= "文件名" width= "300">
            </el-table-column>
            <el-table-column prop= "fileType" label= "文件类型" width= "120">
            </el-table-column>
            <el-table-column prop= "fileSize" label= "文件大小" width= "120">
            </el-table-column>
            <!-- <el-table-column prop= "fileUrl" label= "下载地址" width= "120">
            </el-table-column> -->
            <el-table-column prop= "createTime" label= "创建时间" width= "170">
            </el-table-column>
            <el-table-column prop= "updateTime" label= "更新时间" width= "170">
            </el-table-column>
            <!-- <el-table-column prop= "enabled" label= "是否禁用" width= "170">
            </el-table-column>             -->
            <el-table-column label= "操作">
              <template slot-scope= "scope"><!--slot-scope= "scope"--><!--vscode说定义了但没用，报错却不影响运行，IDEA不报错-->
            
                <!-- <el-popconfirm
                  confirm-button-text= "好的"
                  cancel-button-text= "不用了"
                  icon= "el-icon-info"
                  icon-color= "red"
                  title= "确定删除？"
                  @confirm= "deleteHandler(scope.row.fileId)">
                  <el-button type= "danger" slot = "reference" class= "ml-5">删除<i class= "el-icon-delete"></i></el-button>
                </el-popconfirm> -->
                <el-button type= "warning" @click= "downloadHandler(scope.row.fileUrl)">
                  下载<i class= "el-icon-edit-download"></i>
                </el-button>
                <el-popconfirm confirm-button-text= "好的"
                  cancel-button-text= "不用了"
                  icon= "el-icon-info"
                  icon-color= "red"
                  title= "确定删除？"
                  @confirm= "deleteHandler(scope.row.fileId)">
                  <el-button type= "danger" slot = "reference" class= "ml-5">删除<i class= "el-icon-delete"></i></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div style= "padding: 10px 0">
            <!--分页-->
            <el-pagination
              @size-change= "handleSizeChange"
              @current-change= "handleCurrentChange"
              :current-page= "pageNum"
              :page-sizes= "[5, 10, 15, 20]"
              :page-size= "pageSize"
              layout= "total, sizes, prev, pager, next, jumper"
              :total= "total"
            >
            </el-pagination>
          </div>
    </div>
    <!----------------------------------------------------------------------------------------------------------------------->
    <div>
        <el-upload
        action="http://localhost:8081/file-upload-download/file-upload"
        show-file-list="false"
        :on-success="handleUploadSuccess"
        :on-change="handleChange"
        :limit="100"
        :on-exceed="handleExceed">  

        <el-button size="small" type="primary"><i class="el-icon-upload"></i>上传文件</el-button>
        <div slot="tip" class="el-upload__tip">文件大小至少2KB,不得超过100MB</div>
        </el-upload>
    </div>
</div>
</template>


<script>
  export default {
      name:"FileUploadDownload",
    data() {
      return {
      tableData:[],
      total: 0, //总条数
      pageNum: 1, //第几页
      pageSize: 5, //每页几条数据
      fileId:'',
      fileName:'',
      fileType:'', 
      fileSize:null,
      fileUrl:'',
      createTime: "",
      updateTime: "",
      enabled:null,
      //多选
      multipleSelection: [],
      //表格样式
      headBg: "headBg",
      //////////////////////////////////////////////////////////////////////////////////////////////////////////
        fileList: [],
        file:null
      };
    },
  created() {
    this.load();
  },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleChange(file, fileList) {
        this.fileList = fileList;
      },

      ////////////////////////////////////////////////////////////////////////////////////////////////////////
      load() {
      //MyBatis-plus的时候我们使用axios将前后端数据联动
      //先安装axios，然后直接用就行
      this.request
        .get("http://localhost:8081/file-upload-download/page", {
          params: {
            fileId:this.fileId,
            fileName: this.fileName,
            fileType: this.fileType,
            fileSize: this.fileSize,
            fileUrl:  this.fileUrl,
            enabled:  this.enabled,
            createTime: this.createTime,
            updateTime: this.updateTime,
            pageNum:this.pageNum,
            pageSize:this.pageSize
          },
        })
        .then((res) => {
          console.log(res);

          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    //模糊查询重置按钮方法
    clear() {
    this.fileName="";
    this.fileType="";
      this.load();
    },

    //(和对话框一起使用，点击按钮触发对话框，填写信息之后确定按钮进行最终操作)
    //后续操作（确定/取消按钮--->保存表单信息，删除表单信息，导入记录，导出记录）

    //批量删除+普通单个删除
    batchDelete(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    batchDeleteHandler() {
      let fileIds = this.multipleSelection.map((v) => v.fileId); //将对象数组转化为id数组

      this.request
        .post("/file-upload-download/batchDelete", fileIds)
        // .then((ids) => {
        //   if (ids == []) {
        //     this.$message.error("请先勾选要批量删除的记录!");
        //   }
        // })
        .then((res) => {
          if (res.flag == '200') {
            this.$message.success(res.msg);
            this.load();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    deleteHandler(fileId) {
      this.request.delete("/file-upload-download/" + fileId).then((res) => {
        if (res.flag == '200') {
          this.$message.success(res.msg);
          this.load();
        } else {
          this.$message.error(res.msg);
          this.dialogFormVisible = false;
        }
      });
    },
    handleUploadSuccess(res){
        console.log(res);
        this.load()
    },
    downloadHandler(fileUrl){
        window.open(fileUrl,'_blank')
    }

    // deleteHandler(fileId) {
    //   this.request.delete("/file-upload-download/" + stuId).then((res) => {
    //     if (res.flag == '200') {
    //       this.$message.success(res.msg);
    //       this.load();
    //     } else {
    //       this.$message.error(res.msg);
    //       this.dialogFormVisible = false;
    //     }
    //   });
    // },
    }
  }
</script>
<style scoped>
#center{
background-color: rgba(255, 255, 255, 0.968);
width:84%;
height:87%;
position:fixed;

padding:100px 400px;}
</style>